<template>
	<view class="orderItem">
		<view style="height: 60rpx;line-height: 60rpx;display: flex;flex-direction: row;align-items: center;justify-content: space-between">
			<view style="display: flex;flex-direction: row;">
				<text style="color: #000;">{{orderModel.shopModel.name}}</text>
				<u-icon name="arrow-right" color="#000" size="15"></u-icon>
			</view>
			<view style="color: #fa3534;">{{ orderStatusOptions[orderModel.orderStatus] }}</view>
		</view>
		<view @click="click(orderModel)">
			<view v-if="orderModel.itemList.length>1" style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-right: 20rpx;">
				<view style="display: flex;flex-direction: row;align-items: center;">
					<view v-for="(item, index) in orderModel.itemList.slice(0, 4)" :key='index'
					style="display: flex;flex-direction: row;background-color: #fff;align-items: center;margin-right:12rpx;padding: 16rpx 0;">
						<image :src="item.coverUrl" mode='aspectFill' style="width: 130rpx;height: 130rpx;"></image>
					</view>
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;">
					<view style="flex-shrink: 0;">共{{orderModel.itemList.length}}件</view>
					<u-icon name="arrow-right" color="#999" size="15"></u-icon>
				</view>
			</view>
			<view v-else>
				<view v-for="(item, index) in orderModel.itemList" :key='index'
				style="display: flex;flex-direction: row;align-items: center;width: 710rpx;padding: 16rpx 0;">
					<view style="display: flex;flex-direction: row;">
						<image :src="item.coverUrl" mode='aspectFill' style="width: 160rpx;height: 160rpx;"></image>
						<view style="margin-left: 16rpx;width: 510rpx;">
							<view style="font-size: 28rpx;" class='limitLineNumOfTwo'>{{item.itemName}}</view>
							<view style="font-size: 28rpx;margin-top: 8rpx;color: #999;" class='limitLineNumOfOne'>{{getSpecs(item.specValues)}}</view>
							<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 16rpx;margin-right: 16rpx">
								<view style="font-size: 30rpx;">¥{{item.price}}</view>
								共{{item.payCount}}件
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<text style="font-size: 30rpx;color: #fa3534;">实付：</text><text style="color: #fa3534;">¥{{orderModel.realPay}}</text>
		</view>
		<view class="footer">
			<view style="width: 160rpx;margin-left: 20rpx;" v-if="orderModel.orderStatus == 'WAIT_SEND'">
				<u-button type="primary" :plain="true" text="立即接单" @click='getOrder'></u-button>
			</view>
			<view style="width: 160rpx;margin-left: 20rpx;" v-if="orderModel.orderStatus == 'READY_SEND'">
				<u-button type="primary" :plain="true" text="开始配送" @click='sendItem'></u-button>
			</view>
			<!-- <view style="width: 160rpx;margin-left: 20rpx;" v-if="orderModel.orderStatus == 'WAIT_RECEIVE' || orderModel.orderStatus == 'FINISH'">
				<u-button type="info" :plain="true" text="申请换货" @click='returnItem'></u-button>
			</view> -->
			<!-- <view style="width: 160rpx;margin-left: 20rpx;" v-if="orderModel.orderStatus == 'WAIT_RECEIVE'">
				<u-button type="error" :plain="true" text="确认收货" @click='confirmReceive'></u-button>
			</view> -->
			
			<!-- <jc-button v-if="orderModel.orderStatus == 'WAIT_PAY'" @click='goPay' :width='150' :height='70' fontSize='26' backgroundColor='#FFFFFF' color='#FC5E53' :circle='true' title='去支付'></jc-button> -->
			<!-- <jc-button v-if="orderModel.orderStatus == 'WAIT_SEND'" @click='remindSend' <!-- fontSize='26' backgroundColor='#FFFFFF' color='#333333' :width='150' :height='70' :circle='true' title='提醒发货'></jc-button> -->
			<!-- <jc-button v-if="orderModel.orderStatus == 'WAIT_RECEIVE'" @click='confirmReceive' :width='150' :height='70' fontSize='26' backgroundColor='#FFFFFF' color='#333333' :circle='true' title='确认收货'></jc-button> -->
			<!-- <jc-button v-if="orderModel.orderStatus == 'FINISH'" @click='repay' :width='150' :height='70' fontSize='26' backgroundColor='#FFFFFF' color='#FC5E53' :circle='true' title='再次购买'></jc-button> -->
		</view>
	</view>
</template>

<script>
	import {orderStatusOptions} from '@/common/utils/options.js'
	export default{
		components:{},
		props:{
			orderModel: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		data() {
			return {
				orderStatusOptions
			}
		},
		methods:{
			click(){
				this.$emit('click',this.orderModel)
			},
			goPay(){
				this.$emit('goPay',this.orderModel)
			},
			getOrder(){
				this.$emit('getOrder',this.orderModel)
			},
			sendItem(){
				this.$emit('sendItem',this.orderModel)
			},
			//申请换货
			returnItem(){
				this.$emit('returnItem',this.orderModel)
			},
			confirmReceive(){
				this.$emit('confirmReceive',this.orderModel)
			},
			repay(){
				this.$emit('repay',this.orderModel)
			},
			getSpecs(specList) {
				if(!specList) return ''
				//将选中的spec以,隔开
				var specs_sel = ''
				for(var item of JSON.parse(specList)){
					specs_sel = specs_sel + item.name + '，'
				}
				specs_sel = specs_sel.substring(0, specs_sel.length-1)
				return specs_sel
			},
			copy(content){
				uni.setClipboardData({
					data: content,
					success: function() {
						uni.showToast({
							icon: "none",
							title: "复制成功",
						});
					},
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderItem{
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.totalPrice{
			padding: 10rpx;
			text-align: right;
			background-color: #FFFFFF;
			text:nth-of-type(2){
				color: #FC5E53;
				font-size: 34rpx;
				font-weight: bold;
			}
			text:nth-of-type(3){
				font-size: 24rpx;
			}
		}
		.footer{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			margin-top: 20rpx;
			padding-top: 30rpx;
			border-top: 1px solid #EFEFEF;
		}
	}
</style>
